<template>
  <div class="xkdpFull">
    <div id="xkBanner" class="map">
      <img src="/static/imgs/banner.png" alt="">
      <div class="h1">徐霞客镇综合管理服务执法平台 — <span>指挥调度</span></div>
    </div>
    <div id="map-container" :class="{hideCameras: hideCameras}"></div>
     <!-- v-show="currentActiveOptionIndex == 1" -->
    <div class="time-selector" :class="{hideCamera: hideCameras}">
      <TimeSlider ref="timeSlider" @change="sliderChanged"/>
      <div class="audioControl">
        <div><i class="iconfont icon-arrow-" @click="handlerMarkerMove(1)"></i></div>
         <div><i class="iconfont icon-kuaitui" @click="handlerMarkerMove(3)"></i></div>
          <div><i class="iconfont icon-kuaijin" @click="handlerMarkerMove(2)"></i></div>
        <div><i class="iconfont icon-tingzhi" @click="handlerMarkerMove(0)"></i></div>
      </div>
      <div class="speedBar">
        <span>速度</span>
        <el-slider :min="500" class="bar" v-model="pathSpeed" show-stops :max="6000" @change="speedChanged"/>
      </div>
    </div>
    <div class="element-checkbox" :class="{hideCamera: hideCameras}">
      <el-checkbox v-model="showGrids" @change="handlerElCheckBox(showGrids, 'showGrids')" >显示网格</el-checkbox>
      <el-checkbox v-model="showAllPerson" v-show="currentActiveOptionIndex == 1" @change="handlerElCheckBox(showAllPerson, 'showAllPerson')" >显示人员</el-checkbox>
    </div>
    <!-- 实时感知-->
    <div id="xkSsgz" :class="{close: hideSsgz}">
      <div class="clsBtn" @click="hideSsgz=!hideSsgz"></div>
      <div class="title">实时感知</div>
      <div class="subtitle"><span>今日事件数</span></div>
      <div class="number curpointer" @click="openLayuiWindow('/datav/list/sj/index.jsp?isToday=1')"><animated-number :value="tjInfo.event.today" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/><span class="dw">起</span></div>
      <div class="subtitle"><span>今日里程</span></div>
      <div class="number"><animated-number :value="tjInfo.licheng" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/><span class="dw">公里</span></div>
      
      <!-- <div class="subtitle"><span>今日巡查</span></div>
      <div class="number"><animated-number :value="tjInfo.hours" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/><span class="dw">小时</span></div>
       -->
      <div class="subtitle"><span>今日考勤</span></div>
      <div id="chartJrkq"></div>
      <div class="subtitle"><span>事件处理</span></div>
      <div id="sjcl">
        <div class="leftItems">
          <div class="item">
            <div class="l1">待处理</div>
            <div class="r1"><animated-number :value="tjInfo.event.dcl" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/></div>
          </div>
          <div class="item">
            <div class="l1">总数</div>
            <div class="r1"><animated-number :value="tjInfo.event.total" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/></div>
          </div>
          <div class="item">
            <div class="l1">已办结</div>
            <div class="r1"><animated-number :value="tjInfo.event.ycl" :formatValue="$Filter.engNumberFmt" :duration="800" :round="1"/></div>
          </div>
        </div>
        <div class="rightItem">
          <BeautyBall :range="tjInfo.event.bjl"/>
        </div>
      </div>
    </div>
    <!-- 事件列表-->
    <div id="xkSjlb" :class="{hideCamera: hideCameras}">
      <div class="leftFrame" v-loading="optionList[1].active && optionList[1].loading">
        <div class="optionBar">
          <div class="item" v-for="(item, index) in optionList" :key="index" :class="{active: item.active}" @click="handlerListOption(index)">{{item.name}}</div>
        </div>
        <div class="searchBar">
          <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="enterSearch('enter')">
          <div class="button" @click="showSearch"></div>
        </div>
        <div class="title">{{optionList[currentActiveOptionIndex].name}}列表
           <div class="refresh" @click="enterSearch('refresh')" :class="{loading: listLoading == 'refresh'}"></div>
        </div>
        <div class="sjItems" v-show="optionList[0].active">
          <div class="item" v-for="(item, index) in sjList" :key="index" @click="sjItemClicked(item, index);" :class="{active: item.active}">
            <div class="topp">
              <img :src="item.img | productEnv" alt="">
              <div class="sjtitle">{{item.name}}</div>
            </div>
            <div class="botmp">
              <div class="ren">{{item.userName}}</div>
              <div class="chd" :class="chdOptions[item.level] || 'aq'">{{item.level}}</div>
              <div class="shj">{{item.date.slice(0, 16)}}</div>
            </div>
          </div>
        </div>
        <div class="ryItems" v-show="optionList[1].active">
          <div class="filters">
            <div class="item" v-for="(item, index) in RY_STATUS_FILTER" :key="index" :class="{active: item.active}" @click="handlerRyFilter(index)">{{item.name}}</div>
          </div>
          <div class="ry-item" :class="item.status + ' ' + (item.active && 'active')" v-for="(item, index) in filteredRyList" :key="index" @mousedown="showRyRightMenu($event, item)">
            <div class="len">
              <div class="name">{{item.name}}</div>
              <div class="status">{{item.status == 'online' ? '在线' : '离线'}}</div>
            </div>
            <div class="len">
              <div class="time">{{item.time}}</div>
              <div class="distance">{{item.dist}}</div>
            </div>
          </div>
        </div>
        <div v-for="(option, index) in optionList" :key="index">
          <div class="cameraItems" v-if="option.type" v-show="option.active">
            <div class="item" :class="item.active && 'active'"  v-for="(item,id) in option.list" :key="id" @click="cameraItemClicked(item);">
              <div class="name">{{item.name}}</div>
              <div class="addr">地址：{{item.addr}}</div>
            </div>
          </div>
        </div>
        <div class="searchFrame" v-show="showSearchFrame">
          <div class="clsbtn" @click="showSearchFrame = false;">×</div>
          <div class="form">
            <div class="len">
              <div class="t">关键字：</div>
              <div class="input"><input type="text" v-model="optionList[0].filter.keyword"></div>
            </div>
            <div class="len">
              <div class="t">日期：</div>
              <div class="input">
                <el-date-picker class="lw-datepicker" v-model="optionList[0].filter.time" type="date" placeholder="选择日期" />
              </div>
            </div>
            <div class="len">
              <div class="t">所属网格：</div>
              <el-cascader class="lw-selector"
                clearable
                change-on-select
                :options="gridNoArr"
                :props="{value: 'id', label: 'name', children: 'child'}"
                v-model="optionList[0].filter.grid">
              </el-cascader>
            </div>

            <!-- <div class="len">
              <div class="t">状态：</div>
              <div class="input">
                <select name="" id="">
                  <option value="">全部</option>
                  <option value="">离线</option>
                  <option value="">在线</option>
                </select>
              </div>
            </div> -->
            <!-- <div class="len">
              <div class="t">上报人员：</div>
              <div class="input"><input type="text"></div>
            </div> -->
            <div class="len btns">
              <div class="btn search" @click="enterSearch"></div>
              <div class="btn cz" @click="resetSearch"></div>
            </div>
          </div>
        </div>
        <div class="pagebtns">
          <button type="button" class="btn1" @click="pageNumberChanged(-1)" :disabled="optionList[currentActiveOptionIndex].isFirstPage || optionList[currentActiveOptionIndex].currentPage == 1">上一页</button>
          <button type="button" class="btn1" @click="pageNumberChanged(1)" :disabled="optionList[currentActiveOptionIndex].isLastPage || optionList[currentActiveOptionIndex].currentPage >= optionList[currentActiveOptionIndex].totalPage">下一页</button>
        </div>
      </div>
      <div class="styleLine"></div>
      <div class="rightFrame">
        <div class="item-detail-info" v-if="optionList[0].active" v-loading="!!loadingItemExtInfo" :element-loading-text="loadingItemExtInfo" element-loading-background="rgba(0, 0, 0, 0.8)">
          <div class="currentSj">
            <div class="title">{{sjInfo.base.title}}</div>
            <div class="imgView" v-viewer>
              <div v-for="(item, index) in sjInfo.base.imgs" :key="index" class="imgDiv"
                :class="{afterDo: item.status == 1}">
                <img :src="item.url | productEnv" alt="">
              </div>
            </div>
            <div class="abstracts" >
              <div class="item">
                <div class="key">事发地址：</div>
                <div class="value">{{sjInfo.base.addr}}</div>
              </div>
              <div class="item">
                <div class="key">上报人：</div>
                <div class="value">{{sjInfo.base.userName}} <img @click="openVideoCamera({userId: sjInfo.base.userId, name: sjInfo.base.userName})" src="/static/imgs/zhdd/23.png" style="margin-left: 10px;cursor:pointer;"> </div>

              </div>
              <div class="item">
                <div class="key">上报时间：</div>
                <div class="value">{{sjInfo.base.date}}</div>
              </div>
              <div class="item">
                <div class="key">联系方式：</div>
                <div class="value">{{sjInfo.base.phone}}</div>
              </div>
            </div>
            <div class="viewbtn" @click="showSjDetail(sjInfo.base.id)"></div>
          </div>
          <div class="extra">
            <div class="zbry title">周边人员</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in sjInfo.person" :key="index">
                <div class="t" style="min-width: 80px;">{{item.name}}</div>
                <div class="t" style="min-width: 130px;">{{item.phone}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
                <div class="btns">
                  <div class="voice" style="display:none;"></div>
                  <div class="video" @click="openVideoCamera(item)"></div>
                  <div class="track" @click="showPersonPath(item)"></div>
                </div>
              </div>
            </div>
            <div class="zbjk title">周边监控</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in sjInfo.camera" :key="index">
                <div class="t" style="min-width: 180px;">{{item.name}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
                <div class="btns">
                  <div class="camera" @click="showCamera(item)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-detail-info" v-if="optionList[1].active" v-loading="!!loadingItemExtInfo" :element-loading-text="loadingItemExtInfo" element-loading-background="rgba(0, 0, 0, 0.8)">
          <div class="flex">
            <div class="currentSj" style="margin: 30px 40px;">
              <div class="flex">
                <div class="headImg" v-viewer><img :src="ryInfo.base.icon | productEnv" alt=""></div>
                <div>
                <div class="title">{{ryInfo.base.userName}}</div>
                  <div class="abstracts" >
                    <div class="item">
                      <div class="value">{{ryInfo.base.deptName}}</div>
                    </div>
                    <div class="item">
                      <div class="value">{{ryInfo.base.phone}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="display:flex;">
                <div class="actionb" @click="showPersonPath(activePerson)">轨迹播放</div>
                <div class="actionb" @click="openVideoCamera({userId: ryInfo.base.id, name: ryInfo.base.userName})">视频对讲</div>
              </div>
            </div>
          </div>
          <div class="extra">
            <div class="zbry title">周边事件</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in ryInfo.event" :key="index">
                <div class="t sjname" @click="showSjDetail(item.id)">{{item.name}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
              </div>
            </div>
            <div class="zbjk title">周边监控</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in ryInfo.camera" :key="index">
                <div class="t" style="min-width: 180px;">{{item.name}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
                <div class="btns">
                  <div class="camera" @click="showCamera(item)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-detail-info" v-if="currentActiveOptionIndex > 1 && optionList[currentActiveOptionIndex].activeItem" 
          v-loading="!!loadingItemExtInfo" :element-loading-text="loadingItemExtInfo" element-loading-background="rgba(0, 0, 0, 0.8)">
          <div class="currentSj">
            <div class="title">{{optionList[currentActiveOptionIndex].activeItem.base.title}}</div>
            <div class="abstracts" >
              <div class="item">
                <div class="key">地址：</div>
                <div class="value">{{optionList[currentActiveOptionIndex].activeItem.base.addr}}</div>
              </div>
              <div class="item" style="display:none;">
                <div class="key">负责人：</div>
                <div class="value">{{optionList[currentActiveOptionIndex].activeItem.base.fzr}}</div>
              </div>
              <div class="item">
                <div class="key">联系方式：</div>
                <div class="value">{{optionList[currentActiveOptionIndex].activeItem.base.phone}}</div>
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <div class="actionb" @click="showCamera(optionList[currentActiveOptionIndex].activeItem)" style="color: white;font-size: 26px;cursor: pointer;width: 180px;border-radius: 10px;height: 46px;line-height: 46px;border: 2px solid #83ffce;text-align: center;margin: 0 auto 15px;">播放</div>
          </div>
          <div class="extra">
            <div class="zbry title">周边人员</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in optionList[currentActiveOptionIndex].activeItem.person" :key="index">
                <div class="t" style="min-width: 80px;">{{item.name}}</div>
                <div class="t" style="min-width: 130px;">{{item.phone}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
                <div class="btns">
                  <div class="voice" style="display:none;"></div>
                  <div class="video" @click="openVideoCamera(item)"></div>
                  <div class="track" @click="showPersonPath(item)"></div>
                </div>
              </div>
            </div>
            <div class="zbjk title">周边监控</div>
            <div class="exscroll">
              <div class="item" v-for="(item, index) in optionList[currentActiveOptionIndex].activeItem.camera" :key="index">
                <div class="t" style="min-width: 180px;">{{item.name}}</div>
                <div class="t" style="min-width: 80px;">{{item.dist}}</div>
                <div class="btns">
                  <div class="camera" @click="showCamera(item)"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 监控-->
    <div id="cameras" :class="{close: hideCameras}" v-if="pageActive">
      <div class="refresh" @click="getInitCameras()">⟲</div>
      <div class="clsBtn" @click="hideCameras=!hideCameras"></div>
      <draggable class="listIts">
        <div v-for="(item, index) in hlsSource.slice(0, 3)" :key="index" class="item dragmm" @click="tpCamera = index" :class="{active: tpCamera == index}" >
          <HlsPlayer :url-source="item.url"/>
        </div>
      </draggable>
    </div>
    <right-menu :pop-items="popItems" :mouse="mousePosition" @ListItemClick="listItemClick"/>
    <right-menu :pop-items="popItems4Camera" :mouse="mousePosition4Camera" @ListItemClick="showCameraFrame"/>
    <!-- 右侧option-->
    <div id="xkRightOption">
      <div class="item" v-for="(item, index) in rigthMenus" :key="index" :class="{active: item.active}" @click="rightMenuClicked(index)">
        <div class="title">{{item.name}}</div>
      </div>
    </div>

    <!-- 大数据平台 -->
    <div id="biplatform" v-show="rigthMenus[1].active">
      <div class="mainframe">
        <div class="paihang">
          <div class="title"><img src="/static/imgs/bi/1.png" alt=""><span>部门数据量接入排行</span></div>
          <div class="header">
            <div class="t1">排名</div>
            <div class="t2">部门名称</div>
            <div class="t3">接入量</div>
          </div>
          <div class="items">
            <div class="item" v-for="(item, index) in bmsjl" :key="index">
              <div class="t1"><span>{{item.order + 1}}</span></div>
              <div class="t2">{{item.name}}</div>
              <div class="t3">{{item.num}}</div>
            </div>
          </div>
        </div>
        <div class="paihang">
          <div class="title"><img src="/static/imgs/bi/1.png" alt=""><span>应用系统使用排行</span></div>
          <div class="header">
            <div class="t1">排名</div>
            <div class="t2">系统名称</div>
            <div class="t3">接入量</div>
          </div>
          <div class="items">
            <div class="item" v-for="(item, index) in yyxtsy" :key="index">
              <div class="t1"><span>{{item.order + 1}}</span></div>
              <div class="t2">{{item.name}}</div>
              <div class="t3">{{item.num}}</div>
            </div>
          </div>
        </div>
        <div class="centerNums">
          <div class="title">累计数据量</div>
          <div class="nums">
            <div class="group" v-for="(nums, index) in leijiNumByGroup" :key="index">
              <div class="item" v-for="(n, i) in nums" :key="i">{{n}}</div>
            </div>
          </div>
          <div class="numGroup">
            <div class="item _1"><div class="th">接入数据量</div><div class="nu">{{leijiNum[1] | engNumberFmt}}</div></div>
            <div class="item _2"><div class="th">接入数据项</div><div class="nu">{{leijiNum[2] | engNumberFmt}}</div></div>
            <div class="item _3"><div class="th">累计交换量</div><div class="nu">{{leijiNum[3] | engNumberFmt}}</div></div>
            <div class="item _4"><div class="th">今日交换量</div><div class="nu">{{leijiNum[4] | engNumberFmt}}</div></div>
          </div>
        </div>
        <div class="rightTj">
          <div class="logo _1"></div><div class="logo _2"></div><div class="logo _3"></div>
          <div class="logo _4"></div><div class="logo _5"></div><div class="logo _6"></div>
          <div class="logo _7"></div><div class="logo _8"></div><div class="logo _9"></div>

          <div class="block _1"><div class="title">智慧党建</div><div class="num">使用数据量：<span>{{tongjiNum[0]}}条</span></div></div>
          <div class="block _2"><div class="title">政务服务</div><div class="num">使用数据量：<span>{{tongjiNum[1]}}条</span></div></div>
          <div class="block _3"><div class="title">指挥调度</div><div class="num">使用数据量：<span>{{tongjiNum[2]}}条</span></div></div>
          <div class="block _4"><div class="title">信用监管</div><div class="num">使用数据量：<span>{{tongjiNum[3]}}条</span></div></div>
          <div class="block _5"><div class="title" style="width: 160px;">经济运行分析</div><div class="num">使用数据量：<span>{{tongjiNum[4]}}条</span></div></div>
          <div class="block _6"><div class="title">智慧环保</div><div class="num">使用数据量：<span>{{tongjiNum[5]}}条</span></div></div>
          <div class="block _7"><div class="title">舆情监控</div><div class="num">使用数据量：<span>{{tongjiNum[6]}}条</span></div></div>
          <div class="block _8"><div class="title">综合执法</div><div class="num">使用数据量：<span>{{tongjiNum[7]}}条</span></div></div>
          <div class="block _9"><div class="title">网格化</div><div class="num">使用数据量：<span>{{tongjiNum[8]}}条</span></div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LwMap from './lwmap/gaode/index';
  import G2 from '@antv/g2';
  // import LwSocket from '@/components/socket/index';
  import '@/components/time';
  import BeautyBall from './component/BeautyBall/index';
  import HlsPlayer from './component/HlsPlayer';
  import draggable from 'vuedraggable';
  import TimeSlider from './component/TimeSlider/Index';
  import _ from 'lodash';
  import AnimatedNumber from "animated-number-vue";
  const boundaryData = window.boundaryData;
  const layui = require('layui');

  var RY_STATUS_FILTER = [
    {name: '全部', active: true, status: ''},
    {name: '在线', active: false, status: 'online'},
    {name: '离线', active: false, status: 'unline'}
  ];
  const chdOptions = {
    '一般': 'yb',
    '紧急': 'jj'
  };
  export default {
    name: 'Login',
    components: {BeautyBall, HlsPlayer, draggable, TimeSlider, AnimatedNumber},
    data () {
      return {
        pageActive: parent == window,
        hideSsgz: false,
        hideCameras: false,
        listLoading: false,
        tjInfo: {
          licheng: 0,
          hours: 0,
          event: {
            today: 0,
            total: 0,
            dcl: 0,
            ycl: 0,
            bjl: 0
          }
        },
        loadingItemExtInfo: false,
        RY_STATUS_FILTER,
        chdOptions,
        currentActiveOptionIndex: 0,
        optionList: [
          // eslint-disable-next-line
          {name: '事件', active: true, currentPage: 1, isFirstPage: true, isLastPage: false,
          filter: {
            keyword: '',
            grid: [],
            time: ''
          }},
          {
            name: '人员',
            active: false,
            loading: true,
            pageSize: 7,
            currentPage: 1,
            totalPage: 0,
            // 过滤条件
            filter: {
              status: '',
              keyword: ''
            }
          },
          {name: '监控', active: false, list: [], currentPage: 0, type: '监控', isFirstPage: true, isLastPage: false, activeItem: 0, filter: ''}
        ],
        keyword: '',
        showSearchFrame: false,
        // 地图部分
        showGrids: true,
        showAllPerson: true,
        ryList: [],
        sjList: [],
        dbList: [],
        sjInfo: {
          base: {
            title: "",
            addr: "",
            date: "",
            userName: "",
            phone: "",
            imgs: [
            ]
          },
          person: [
          ],
          camera: [
          ]
        },
        ryInfo: {
          base: {id: '', deptName: '', userName: '', phone: ''},
          event: [],
          camera: []
        },
        activePerson: '',
        hlsSource: [
          {id: '', name: '', url: ''}, {id: '', name: '', url: ''}, {id: '', name: '', url: ''}
        ],
        tpCamera: 0,
        // showDialog: false,
        // cameraSrc: '',
        popItems: [
          { class: 'fa fa-wrench', txt: '轨迹回放' },
          { class: 'fa fa-check', txt: '视频通话' }
        ],
        popItems4Camera: [
          { class: 'fa fa-wrench', txt: '播放' }
        ],
        mousePosition: ['close'],
        mousePosition4Camera: ['close'],
        pathSpeed: 1000,
        gridNoArr: [],
        rigthMenus: [ {name: '现场调度', active: true}, {name: '大数据中心', active: false} ],
        // 大数据数据
        bmsjl: [],
        yyxtsy: [],
        leijiNum: [0, 0, 0, 0, 0],
        tongjiNum: [0, 0, 0, 0, 0, 0, 0, 0, 0]
      };
    },
    methods: {
      handlerElCheckBox: function (val, name) {
        if (name == 'showGrids') {
          if (val) {
            this.addFeatures();
          } else {
            this.map.removeFeature('3DBoundarys');
          }
        }
        if (name == 'showAllPerson') {
          if (val) {
            this.showMarkers(1);
          } else {
            this.map.clearActivities((n) => {
              return n.type == 'PersonMarker';
            });
          }
        }
      },
      handlerListOption: function (index) {
        var vm = this;
        if (vm.showSearchFrame) return;
        vm.$Util.toggleAttr(this.optionList, index);
        vm.currentActiveOptionIndex = index;
        // 地图初始化
        // vm.map.setCenterAndZoom(vm.initOffset, 13.3);
        vm.map.showInfoWindow('', vm.initOffset);
        vm.showMarkers(index);
        if (vm.optionList[index].currentPage == 0) {
          // 非事件和人员 懒加载列表
          vm.loadCameras(this.optionList[index]);
        }
        if (!vm.showGrids) {
          vm.showGrids = true;
          vm.handlerElCheckBox(1, 'showGrids');
        }
      },
      loadCameras: function (item, page = 1) {
        var vm = this;
        item.currentPage = page;
        vm.getAndLoad(item.name, 'api/v3/xxkz/getCameras.jsp?' + vm.$Util.stringify({
          pageNo: page,
          keyword: item.keyword,
          type: item.type
        }), function (data) {
          item.list = data.data;
          item.isFirstPage = data.isFirstPage;
          item.isLastPage = data.isLastPage;
          vm.listLoading = false;
          if (data.data.length && !item.activeItem) {
            vm.showCameraDetail(item, 0);
          }
          item.list.forEach(function (obj) {
            vm.showCameraMarker(obj);
          });
        });
      },
      showCameraMarker: function (item) {
        var vm = this;
        const params = [
          ['/static/imgs/zhdd/tubiao2.gif', [120, 120], [60, 60]],
          ['/static/imgs/zhdd/dd-7.png', [35, 43], [18, 43]]
        ];
        var parr = item.warning ? params[0] : params[1];
        // var offsetPonit = [parseFloat(item.lng) + this.mapOffset[0], parseFloat(item.lat) + this.mapOffset[1]];
        // this.map.setCenterAndZoom(offsetPonit, 15);
        this.map.addMarker('CameraMarker' + item.id, parr[0], [item.lng, item.lat], parr[1], parr[2], (e) => {
          var clicked = vm.cameraItemClicked(item);
          if (clicked) {
            vm.mousePosition4Camera = [e.pixel.x - 1400, e.pixel.y];
            vm.cameraIdforPop = item;
          }
        }, {
          type: 'CameraMarker'
        });
        // var marker = this.map.mapBox['CameraMarker'];
        // marker && this.map.setAnimation(marker, 'BOUNCE', 5000);
      },
      showCameraFrame: function (item) {
        !item && (item = this.cameraIdforPop);
        item.url && this.showCamera(item);
      },
      cameraItemClicked: function (item) {
        // var offsetPonit = [parseFloat(item.lng) + this.mapOffset[0], parseFloat(item.lat) + this.mapOffset[1]];
        // this.map.setCenterAndZoom(offsetPonit, 15);
        var option = this.optionList.find((opt) => opt.active);
        var listIndex = option.list.findIndex((obj) => obj.id == item.id);
        if (!option.activeItem || item.id != option.activeItem.base.id) {
          var marker = this.map.mapBox['CameraMarker' + item.id];
          marker && this.map.setAnimation(marker, 'BOUNCE', 5000);
          this.showCameraDetail(option, listIndex);
        } else {
          return item; // 已经为active状态
        }
      },
      showCameraDetail: function (item, index) {
        var vm = this;
        vm.$Util.toggleAttr(item.list, index);
        var id = item.list[index].id;
        var url = item.list[index].url;
        vm.getAndLoad(item.name + '详情', 'api/v3/xxkz/getCameraInfo.jsp?id=' + id, function (data) {
          data.url = url;
          item.activeItem = data;
        });
      },
      showMarkers: function (index) {
        var vm = this;
        if (index == 0) {
          vm.map.clearActivities((n) => n.type == 'CameraMarker');
          vm.map.clearActivities((n) => n.type == 'PersonMarker');
          vm.map.removeMarkerAndPath();
          // 显示所有的代办事件
          vm.dbList.forEach((event) => {
            var src = event.level == '紧急' ? '/static/imgs/zhdd/jj.gif' : '/static/imgs/zhdd/30.png';
            vm.map.addMarker('ProEvent' + event.id, src, [event.lng, event.lat], [44, 70], [22, 66], function () {
              // var offsetPonit = [parseFloat(event.lng) + vm.mapOffset[0], parseFloat(event.lat) + vm.mapOffset[1]];
              // vm.map.setCenterAndZoom(offsetPonit, 15);
              vm.sjItemClicked(event, -1);
            }, {
              type: 'EventMarker'
            });
          });
        }
        if (index == 1) {
          vm.map.clearActivities((n) => n.type == 'CameraMarker');
          vm.map.clearActivities((n) => n.type == 'EventMarker');
          vm.map.removeMarkerAndPath();
          // 把所有人员标注在地图上
          vm.ryList.forEach((person) => {
            vm.map.addMarker('Person' + person.id, `/static/imgs/zhdd/28${person.isxcy ? 'law' : ''}.png`, [person.lng, person.lat], [30, 35], [15, 35], function (e) {
              // if (vm.map.getZoom() < 15) {
              //   // var offsetPonit = [parseFloat(person.lng) + vm.mapOffset[0], parseFloat(person.lat) + vm.mapOffset[1]];
              //   // vm.map.setCenterAndZoom(offsetPonit, 15);
              //   vm.map.setAnimation(this, 'BOUNCE', 2500);
              //   return;
              // }
              let x = e.pixel.x;
              let y = e.pixel.y;
              vm.mousePosition = [x - 1400, y];
              vm.ryList.forEach((n) => { n.active = false; });
              var activePerson = vm.ryList.find((n) => n.id == person.id);
              vm.showRenyanDetail(person.id);
              activePerson.active = true;
              vm.activePerson = activePerson;
            }, {
              type: 'PersonMarker'
            }, person.name);
          });
          this.showAllPerson = true;
        }
        if (index > 1) {
          vm.map.clearActivities((n) => n.type == 'PersonMarker');
          vm.map.removeMarkerAndPath();
          vm.map.clearActivities((n) => n.type == 'EventMarker');
          vm.map.clearActivities((n) => n.type == 'CameraMarker');
          vm.optionList[index].currentPage && vm.optionList[index].list.forEach((camera) => {
            vm.showCameraMarker(camera);
          });
        }
      },
      handlerRyFilter: function (index) {
        var vm = this;
        vm.$Util.toggleAttr(this.RY_STATUS_FILTER, index);
        var option = this.optionList[this.currentActiveOptionIndex];
        option.filter.status = this.RY_STATUS_FILTER[index].status;
        option.currentPage = 1;
      },
      showSjDetail: function (id) {
        window.layer.open({
          closeBtn: process.env.API_URL,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['50%', '920px'],
            content: [process.env.API_URL + "/datav/view/viewContent.jsp?entityName=ExtXKItemReport&id=" + id, 'no']
          }
        );
      },
      enterSearch: function (keyDown) {
        // 根据关键字搜索
        var vm = this;
        var option = this.optionList[this.currentActiveOptionIndex];
        if (keyDown == 'refresh') {
          vm.listLoading = 'refresh';
        }
        if (option.name == '人员') {
          if (keyDown == 'refresh') {
            vm.loadPersonList(1);
            return;
          }
          option.filter.keyword = this.keyword;
        }
        if (option.name == '事件') {
          var filter = option.filter;
          var condition = '';
          var keyword = '';
          if (keyDown == 'enter') {
            // 直接keyword搜索
            keyword = vm.keyword;
            option.filter.keyword = keyword;
          } else {
            // 搜索按钮
            keyword = filter.keyword;
            vm.keyword = filter.keyword;
          }
          var date = vm.$Util.getFmtDate(filter.time);
          var gridId = filter.grid[filter.grid.length - 1] || '';
          condition = vm.$Util.stringify({
            pageNo: 1,
            keyword,
            gridId,
            date
          });
          vm.getAndLoad('事件搜索', 'api/v3/zhdd/queryEvents.jsp?' + condition, function (data) {
            data.list.forEach((n, i) => {
              n.active = false;
            });
            if (data.list.length) {
              vm.sjItemClicked(data.list[0], 0, true);
            }
            vm.sjList = data.list;
            option.isFirstPage = data.isFirstPage;
            option.isLastPage = data.isLastPage;
            option.currentPage = 1;
            vm.listLoading = false;
          });
          vm.showSearchFrame = false;
        }
        if (option.type) { // 监控类有type字段
          option.keyword = this.keyword;
          this.loadCameras(option, 1);
        }
      },
      resetSearch: function () {
        this.optionList[0].filter = {
          keyword: '',
          grid: [],
          time: ''
        };
      },
      showCamera: async function (item) {
        this.hideCameras && (this.hideCameras = false);
        var url = item.url;
        if (url) {
          this.hlsSource[this.tpCamera].url = url;
        } else {
          // var index = window.layer.load();
          this.loadingItemExtInfo = '正在获取监控地址';
          // this.$message.info('获取监控地址中，请稍后');
          url = await this.getCameraUrlById(_.get(item, 'id') || _.get(item, 'base.id'));
          // window.layer.close(index);
          this.loadingItemExtInfo = false;
          if (!url) {
            this.$message.error(`未获得${item.name || ''}视频资源`);
          } else {
            this.hlsSource[this.tpCamera].url = url;
          }
        }
      },
      
      getCameraUrlById (id) {
        var vm = this;
        return new Promise(resolve => {
          vm.getAndLoad('获取cameraUrl', 'api/v3/zhdd/getCamerasInfo.jsp?id=' + id, (data) => {
            resolve((data && data.url) || '');
          });
        });
      },
      showRyRightMenu: function (e, item) {
        // var offsetPonit = [parseFloat(item.lng) + this.mapOffset[0], parseFloat(item.lat) + this.mapOffset[1]];
        // this.map.setCenterAndZoom(offsetPonit, 15);
        var marker = this.map.mapBox['Person' + item.id];
        marker && this.map.setAnimation(marker, 'BOUNCE', 5000);
        if (!this.showAllPerson) {
          this.showMarkers(1);
        }
        if (this.activePerson != item) {
          this.showRenyanDetail(item.id);
          this.activePerson = item;
          this.ryList.forEach((n) => { n.active = false; });
          item.active = true;
        }
      },
      listItemClick: function (it) {
        if (it == 0) {
          // 轨迹播放
          this.showPersonPath(this.activePerson);
        } else {
          // 视频对讲
          this.openVideoCamera({
            userId: this.activePerson.id,
            name: this.activePerson.name
          });
        }
      },
      showPersonPath: function (item) {
        // 显示路径
        var vm = this;
        vm.map.clearActivities((n) => n.type == 'PersonMarker');
        vm.showAllPerson = false;

        // vm.map.removeFeature('3DBoundarys');
        // vm.showGrids = false;

        var dateObj = vm.$refs.timeSlider.getResult();
        // map.clear
        vm.getAndLoad('获取人员路径', 'api/v3/zhdd/getRoute.jsp?' + vm.$Util.stringify({
          userId: item.id || item.userId,
          dateFrom: dateObj.start + ':00.000',
          dateTo: dateObj.end + ':00.000'
        }), vm.showPeoplePath, item);
        this.activePerson = item;
      },
      sliderChanged: function () {
        if (this.currentActiveOptionIndex == 1 && this.activePerson) {
          this.showPersonPath(this.activePerson);
        }
      },
      speedChanged: function () {
        var vm = this;
        if (vm.peoPoint) {
          vm.peoPoint.setSpeed(this.pathSpeed);
        }
      },
      pageNumberChanged: function (offset) {
        var option = this.optionList[this.currentActiveOptionIndex];
        option.currentPage += offset;
        if (option.name == '事件') {
          var vm = this;
          var filter = option.filter;
          var date = vm.$Util.getFmtDate(filter.time);
          var gridId = filter.grid[filter.grid.length - 1] || '';
          vm.getAndLoad('事件列表', 'api/v3/zhdd/queryEvents.jsp?' + vm.$Util.stringify({
            pageNo: option.currentPage,
            keyword: filter.keyword,
            gridId,
            date
          }), function (data) {
            vm.sjList = data.list;
            option.isFirstPage = data.isFirstPage;
            option.isLastPage = data.isLastPage;
          });
        }
        if (option.type) {
          this.map.clearActivities((n) => n.type == 'CameraMarker');
          this.loadCameras(option, option.currentPage);
        }
      },
      // 统一请求加载方法x
      getAndLoad: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + apiUrl).then(function (res) {
          if (res.data && (res.data.code == 0 || res.data.code == 200)) {
            callback(res.data.data, params);
          } else {
            vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
          }
        }, function () {
          vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
        });
      },
      showSearch: function () {
        if (this.currentActiveOptionIndex == 0) {
          this.showSearchFrame = true;
        } else {
          this.enterSearch('enter');
        }
      },
      mapBoxManager: function (status, layer) {
        if (status) {
          // 展示
          this.map.add(this.mapBox[layer]);
        } else {
          // 移除
          this.map.remove(this.mapBox[layer]);
        }
      },
      initKqInfo: function (source) {
        // chart
        document.getElementById('chartJrkq').innerHTML = '';
        var data = [
          {
            item: '缺勤',
            percent: source.qq
          }, {
            item: '异常',
            percent: source.yc
          }, {
            item: '正常',
            percent: source.zc
          }];
        var chart = new G2.Chart({
          container: 'chartJrkq',
          width: 340,
          height: 200,
          padding: [40, 10, 10, 10]
        });
        chart.source(data, {
          percent: {
            formatter: function formatter (val) {
              val = val + '%';
              return val;
            }
          }
        });
        chart.coord('theta', {
          radius: 0.92,
          innerRadius: 0.78
        });
        chart.tooltip({
          showTitle: false,
          itemTpl: `<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>`,
          style: {
            fontSize: 16
          }
        });
        chart.intervalStack().position('percent').color('item').label('percent', {
          formatter: function formatter (val, item) {
            return item.point.item + ': ' + val;
          },
          textStyle: {
            fill: 'white',
            fontSize: 16
          },
          labelLine: {
            lineWidth: 2
          }
        }).tooltip('item*percent', function (item, percent, count) {
          percent = percent + '%';
          return {
            name: item,
            value: percent
          };
        });
        chart.legend({
          position: 'top',
          offsetY: -10,
          offsetX: -80,
          textStyle: {
            fill: 'white',
            fontSize: 16
          },
          marker: 'square'
        });
        chart.render();
      },
      sjItemClicked: function (item, index, first = false) {
        var vm = this;
        if (!first) {
          // var offsetPonit = [parseFloat(item.lng) + vm.mapOffset[0], parseFloat(item.lat) + vm.mapOffset[1]];
          // vm.map.setCenterAndZoom(offsetPonit, 15);
          // 地图上标注
          var src = item.level == '紧急' ? '/static/imgs/zhdd/jj.gif' : '/static/imgs/zhdd/30.png';
          vm.map.addMarker('CurrentEvent', src, [item.lng, item.lat], [60, 90], [30, 75], function () {
            // vm.map.setCenterAndZoom(offsetPonit, 15);
            vm.sjItemClicked(item, index);
          }, {
            type: 'EventMarker'
          });
          vm.map.showInfoWindow(item.name, [item.lng, item.lat], 'middle-left');
        }
        vm.getAndLoad('获取详情', 'api/v3/zhdd/getEventInfo.jsp?id=' + item.id, function (data) {
          vm.sjInfo = data;
          vm.$Util.toggleAttr(vm.sjList, index);
        });
      },
      initMap: function () {
        var vm = this;
        var map = new LwMap('map-container', vm.initOffset, [12.88, 3, 20], {
          pitch: 35.83,
          viewMode: '3D',
          rotation: -22.0169
        });
        vm.map = map;
        map.loadPromise.then(() => {
          map.addControlBar([1930, 30], 1.5);
          // 加网格块
          vm.addFeatures();
          map.addPolygon(boundaryData.coordinates, '#53c5d2', '#05153c', 0.8);
        });
        return map.loadPromise;
      },
      addFeatures: function () {
        var map = this.map;
        boundaryData.features.forEach((feature, index) => {
          // 显示一级网格 （所有村 显示范围 3-14.5）
          map.add3DBoundaryByFeatureV2(feature, '#05153c', 0.4, 2000, [3, 20], '', '3DBoundarys');
        });
      },
      generateNodes: function () {
        var result = [];
        var map = this.map;
        boundaryData.features.forEach((feature, index) => {
          var rs = {};
          var points = map.getRandomPoint(feature.geometry.coordinates[0]);
          rs = {id: feature.id, points, children: []};
          feature.features.forEach((gird, no) => {
            let ps = map.getRandomPoint(gird.geometry.coordinates[0]);
            rs.children.push({id: gird.id, ps});
          });
          result.push(rs);
        });
        console.log(JSON.stringify(result));
      },
      showPeoplePath: function (data, params) {
        var vm = this;
        if (!data || !data.length) {
          vm.$message.warning('该人员在时间段内无轨迹信息');
          return;
        }
        var pathData = [];

        // 组装轨迹
        data.forEach((n, index) => {
          pathData.push([]);
          n.forEach(j => {
            pathData[index].push([j.lng, j.lat]);
          });
        });

        // 调整视角
        // var firstPoint = pathData[0][0];
        // var offsetPonit = [parseFloat(firstPoint[0]) + vm.mapOffset[0], parseFloat(firstPoint[1]) + vm.mapOffset[1]];
        // vm.map.setCenterAndZoom(offsetPonit, 15);

        // 添加路径和marker 开始移动
        var peoPoint = vm.map.addMarkerAndPath(pathData, `/static/imgs/zhdd/28${params[0].isxcy ? 'law' : ''}.png`, [30, 35], [15, 35], params[0].name, [-25, 0], 'BM', 'red', 8);
        vm.peoPoint = peoPoint;
        peoPoint.init();
        peoPoint.run(this.pathSpeed);
      },
      handlerMarkerMove: function (signal) {
        var vm = this;
        if (!vm.peoPoint) {
          return;
        }
        if (signal == 1) {
          if (vm.peoPoint.status == 2) {
            vm.peoPoint.resume();
          } else if (vm.peoPoint.status == 1) {
            vm.peoPoint.pause();
          }
        }
        if (signal == 0) {
          if (vm.peoPoint.status == 0) {
            vm.peoPoint.run(this.pathSpeed, true);
          } else {
            vm.peoPoint.stop();
          }
        }
        if (signal == 2) {
          // 快进5步
          vm.peoPoint.changeStep(5);
        }
        if (signal == 3) {
          // 倒退5步
          vm.peoPoint.changeStep(-10);
        }
      },
      openVideoCamera: function (item) {
        var params = {
          senderId: 'zhzx',
          senderName: '指挥中心',
          receiverId: item.userId,
          receiverName: item.name,
          nameSpace: 'spfw'
          // showCall: 'y',
          // hasWebCam: true,
          // microphone: true
        };
        // this.showDialog = true;
        var url = 'https://2.18.220.81:8443/spfw_v2/pc/rtc.html?' + this.$Util.stringify(params);
        // this.cameraSrc = url;
        var top = (window.screen.height - 740) / 2;
        var left = (window.screen.width - 1550) / 2;
        window.open(url, '视频对讲',
          `height=740,width=1550,top=${top},left=${left},toolbar=no,menubar=no,
          scrollbars=no,resizable=no,location=no,status=no,titlebar=no`
        );
      },
      showRenyanDetail: function (id) {
        var vm = this;
        vm.getAndLoad('人员详情', 'api/v3/zhdd/getPersonInfo.jsp?id=' + id, function (data) {
          vm.ryInfo = data;
        });
      },
      rightMenuClicked: function (index) {
        var vm = this;
        vm.$Util.toggleAttr(vm.rigthMenus, index);
      },
      getKqInfo: function () {
        var vm = this;
        vm.getAndLoad('考勤和统计信息', 'api/v3/zhdd/getTodayStat.jsp', function (data) {
          vm.initKqInfo(data.duty);
          vm.tjInfo = data;
        });
      },
      // websocket部分
      initWebSocket () {
        // var vm = this;
        // var websocket = new LwSocket('wss://221.228.70.89:8443', (message) => {
        //   var parsedMessage = JSON.parse(message.data);
        //   console.log(parsedMessage);
        // });
        // websocket.connect();
        // vm.websocket = websocket;
        var vm = this;
        var ws = new WebSocket('wss://221.228.70.89:8443');
        function register () {
          console.log("***********register***********");
          var message = {
            id: 'register',
            name: "霞客指挥中心",
            userId: "111111"
          };
          sendMessage(message);
        };
        function sendMessage (message) {
          var jsonMessage = JSON.stringify(message);
          ws.send(jsonMessage);
        };
        ws.onmessage = function (message) {
          var parsedMessage = JSON.parse(message.data);
          switch (parsedMessage.id) {
            case 'userChange':
              console.log(parsedMessage.users);
              break;
            case 'userOffline': {
              let userId = parsedMessage.user;
              let user = vm.ryList.find((u) => u.id == userId);
              if (user) {
                user.status = 'unline';
                // vm.$message(user.name + ' 下线了');
              }
            }
            break;
            case 'userOnline': {
              let userId = parsedMessage.user;
              let user = vm.ryList.find((u) => u.id == userId);
              if (user) {
                user.status = 'online';
                // vm.$message(user.name + ' 上线了');
              }
            }
            break;
          }
        }; 
        ws.onclose = function () {
          console.log("***********onclose***********");
        };
        ws.onopen = function () {
          console.log("***********onopen***********");
          register();
        };
      },
      testMessage: function (parsedMessage) {
        var vm = this;
        switch (parsedMessage.id) {
          case 'userChange':
            console.log(parsedMessage.users);
            break;
          case 'userOffline': {
            let userId = parsedMessage.user;
            let user = vm.ryList.find((u) => u.id == userId);
            if (user) {
              user.status = 'unline';
              // vm.$message(user.name + ' 下线了');
            }
          }
          break;
          case 'userOnline': {
            let userId = parsedMessage.user;
            let user = vm.ryList.find((u) => u.id == userId);
            if (user) {
              user.status = 'online';
              // vm.$message(user.name + ' 上线了');
            }
          }
          break;
        }
      },
      openLayuiWindow: function (url, params) {
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['50%', '920px'],
            content: [process.env.PRODUCT_URL + url + '?' + this.$Util.stringify(params), 'no']
          }
        );
      },
      onPageActive: function () {
        var vm = this;
        vm.pageActive = true;
      },
      onPageLeave: function () {
        this.pageActive = false;
      },
      getInitCameras: function () {
        var vm = this;
        vm.hlsSource = [
          {id: '', name: '', url: ''}, {id: '', name: '', url: ''}, {id: '', name: '', url: ''}
        ];
        vm.$nextTick(() => {
          vm.getAndLoad('获取监控列表', 'api/v3/zhdd/getCameras.jsp', function (data) {
            data.forEach((n, i) => {
              !n.url && (n.url = n.sxzbm);
              vm.$set(vm.hlsSource, i, n);
            });
          });
        });   
      },
      loadPersonList: function (refresh) {
        var vm = this;
        vm.getAndLoad('人员列表', 'api/v3/zhdd/queryPerson.jsp', function (data) {
          data.forEach((n) => { n.active = false; });
          vm.ryList = data;
          refresh && vm.ryList.length && vm.showRenyanDetail(vm.ryList[0].id);
          if (vm.currentActiveOptionIndex == 1) {
            vm.showMarkers(1);
          }
          vm.listLoading = false;
          vm.optionList[1].loading = false;
        });
      }
    },

    mounted: function () {
      var vm = this;
      global.$map = vm;
      layui.use(['layer'], function () {
        window.layer = layui.layer;
      });
      setTimeout(function () {
        var compass = document.getElementsByClassName('amap-compass')[0];
        compass.addEventListener('click', function () {
          if (compass.style.transform.includes('rotateX(-0deg)')) {
            if (vm.rotationAndPitch) {
              vm.map.setRotationAndPitch(vm.rotationAndPitch.rotation, vm.rotationAndPitch.pitch);
            }
          } else {
            vm.rotationAndPitch = vm.map.getRotationAndPitch();
          }
        });
      }, 5000);

      vm.getKqInfo();
      vm.kqInfoSearchInterval = setInterval(() => {
        vm.getKqInfo();
      }, 60000);

      vm.initMap().then(() => {
        vm.loadPersonList();
        vm.getAndLoad('事件列表', 'api/v3/zhdd/queryEvents.jsp', function (data) {
          data.list.forEach((n, i) => {
            n.active = false;
          });
          if (data.list.length) {
            vm.sjItemClicked(data.list[0], 0, true);
          }
          vm.optionList[0].isLastPage = data.isLastPage;
          vm.sjList = data.list;
        });
        vm.getAndLoad('代办事件', 'api/v3/zhdd/queryDoEvents.jsp', function (data) {
          vm.dbList = data;
          if (vm.currentActiveOptionIndex == 0) {
            vm.showMarkers(0);
          }
        });
        vm.getAndLoad('网格编号', 'api/v3/wgh/getGrids.jsp', function (data) {
          vm.gridNoArr = data;
        });

        window.$Config && window.$Config.AFTER_ZHDD_MOUNTED && window.$Config.AFTER_ZHDD_MOUNTED(vm);
      });
      // issue 关于无法自动播放 DOMException chrome://flags/#autoplay-policy
      // 开发环境很烦，就不播放了
      // if (process.env.NODE_ENV != "production") {
        vm.getInitCameras();
      // }
      vm.getAndLoad('大数据', 'api/v3/zhdd/dsj/get.jsp?cat=index', function (data) {
        vm.leijiNum = data.leijiNum;
        vm.bmsjl = data.bmsjl;
        vm.yyxtsy = data.yyxtsy;
        vm.tongjiNum = data.tongjiNum;
      });
      vm.initWebSocket();
    },
    computed: {
      // 人员列表为前端分页 用computed计算显示的7个
      filteredRyList: function () {
        var option = this.optionList[this.currentActiveOptionIndex];
        var currentPage = option.currentPage;
        var pageSize = option.pageSize;
        var filter = option.filter;
        var rylist = this.ryList.filter((n) => {
          return (!filter.status || n.status == filter.status) &&
          (!filter.keyword || n.name.includes(filter.keyword));
        });
        option.totalPage = Math.ceil(rylist.length / pageSize);
        return rylist.slice((currentPage - 1) * pageSize, currentPage * pageSize);
      },
      computedImgs: function () {
        return this.sjInfo.base.imgs.map(n => n.url);
      },
      mapOffset: function () {
        return this.hideCameras ? [0.015, -0.01] : [0.025, -0.01];
      },
      initOffset: function () {
        return this.hideCameras ? [120.36047, 31.738648] : [120.345428, 31.763221];
      },
      leijiNumByGroup: function () {
        var val = this.leijiNum[0];
        if (!val) {
          val = 0;
        }
        var str = (Array(9).join("0") + val).slice(-9);
        return _.chunk(str, 3);
      }
    },
    watch: {
      activePerson: function (n, o) {
        var marker;
        if (n && o && n.id != o.id) {
          marker = this.map.mapBox['Person' + o.id];
          marker && this.map.removeAnimation(marker);
        }
      }
    },
    destroyed: function () {
      this.kqInfoSearchInterval && clearInterval(this.kqInfoSearchInterval);
      this.websocket && this.websocket.close();
    }
  };
</script>

<style lang="scss">
button[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}
.nav {
  position: absolute;
  top: 100px;
  left: 90px;
  z-index: 9999;
  width: 600px;
  height:506px;
//  overflow: hidden;
  .home {
      position: absolute;
      bottom: 15px;
      left: 40px;
  }
  .exit {
      position: absolute;
      bottom: 15px;
      right: 40px;
      cursor: pointer;
  }
}
#map-container {
  width: 5240px;
  height: 100%;
  left: -1400px;
  &.hideCameras {
    .amap-controlbar {
      left: 2510px !important;
    }
  }
  .amap-luopan, .amap-luopan-bg {
    background: url(../assets/imgs/map/a33f94.png) 11px 16px no-repeat !important;
  }
  .amap-compass {
    width: 94px !important;
    background: url(../assets/imgs/map/d1b1de.png) 7px 8px no-repeat !important;
  }
  .amap-pointers {
    display: none;
  }
  .amap-pitchUp {
    cursor: pointer;
    background: url(../assets/imgs/map/d8a900.png) 23px 24px no-repeat !important;
    &.amap-pitch-active {
      background: url(../assets/imgs/map/f23025.png) 23px 24px no-repeat !important;
    }
  }
  .amap-pitchDown {
    cursor: pointer;
    background: url(../assets/imgs/map/d8a900.png) 25px 25px no-repeat !important;
    &.amap-pitch-active {
      background: url(../assets/imgs/map/f23025.png) 25px 25px no-repeat !important;
    }
  }
  .amap-rotateLeft, .amap-rotateRight {
    cursor: pointer;
    background: url(../assets/imgs/map/a3dafe.png) 23px 31px no-repeat !important;
  }
  .amap-rotate-active {
    background: url(../assets/imgs/map/721db7.png) 23px 31px no-repeat !important;
  }
  .playBox-show .amap-controlbar {
    bottom: 170px !important;
  }
  .amap-controlbar-zoom-bg {
    display: none;
  }
  .amap-controlbar-zoom {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.31);
    position: relative;
    width: 72px;
    height: 140px;
    border-radius: 5px;
    background: rgba(39, 39, 39, 0.8) !important;
  }
  .amap-controlbar-zoom-add, .amap-controlbar-zoom-sub {
    position: absolute;
    width: 72px;
    height: 70px;
    margin: 0;
  }
  .amap-controlbar-zoom-add {
    position: relative;
    top: -4px;
    left: 0;
    height: 76px;
    &:after {
      content: "";
      position: absolute;
      width: 56px;
      height: 1px;
      background: #979797;
      left: 7px;
      top: 76px;
    }
  }
  .amap-controlbar-zoom-sub {
    top: 82px;
    left: 2px;
  }
  .amap-marker-label {
    color: white;
    border: none;
    background: none;
    font-size: 20px;
  }
}
.camera-dialog {
  >.el-dialog {
    width: 900px;
  }
  .el-dialog__body {
    padding: 0;
    height: 660px;
    width: 100%;
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
.camera-popover {
  left: 1700px;
  top: 180px;
  height: 700px;
  .clsBtn {
    width: 55px;
    height: 55px;
    background: url(/static/imgs/cls.png);
    margin: 0 auto;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    cursor: pointer;
  }
}
ul.el-cascader-menu {
  height: 300px;
}
</style>
